<template>
  <view class="goods-tag">
    <scroll-view class="scroll-view_H" scroll-x="true">
      <view class="goods-tag-body">
        <view class="tag" :style="{'color': item.tagType == '2'? '#F81A1A' : '#1677FF'}" v-for="(item, index) in tagInfoList" :key="'tag_' + index">{{item.tagName}}</view>
      </view>
    </scroll-view>
  </view>
</template>
<script setup lang="ts">
import {ref, onMounted} from 'vue'
type TagInfo = {
  tagName: string,
  tagType: string,
  sortValue: number,
}
const props = defineProps({
  tagList: Array as ()=> TagInfo[],
});
const tagInfoList = ref([])
onMounted(()=>{
  if(props.tagList && props.tagList.length > 0){
    tagInfoList.value = props.tagList.sort((a, b) => {
      const o1 = a.sortValue || 0
      const o2 = b.sortValue || 0
      return o1 - o2
    });
  }
})
</script>
<style lang="scss" scoped>
.goods-tag{
  height: 28rpx;

  .scroll-view_H {
    white-space: nowrap;
    width: 100%;
  }

  .goods-tag-body{
    display: flex;
    gap: 16rpx;
    .tag {

      background: #E6F0FF;
      border-radius: 4rpx;
      padding: 0 8rpx;

      font-size: 20rpx;
      //color: #1677FF;
      letter-spacing: 0;
      text-align: center;
      line-height: 28rpx;
      font-weight: 400;
    }
  }
}
</style>